<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/common.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="title">
        Exam list
    </ui:define>

    <ui:define name="head">
        <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>
         <script>
            $(function() {
                $(document).tooltip();
            });
        </script>
        <style>
            label {
                display: inline-block;
                width: 100px;
            }
        </style>
         <link rel="stylesheet" href="../../res/css/admin-style.css"/>
    </ui:define>

    <ui:define name="pageheader">
        Exam list    
    </ui:define>

    <ui:define name="content">
        <h:form id="mainform">
            <h:selectOneMenu value="#{examManager.courseID}" style="width: 300px;" >
                <f:selectItem itemLabel="&lt;All&gt;" itemValue="0"></f:selectItem>
                <f:selectItems value="#{courseManager.allCourse}"
                               var="c"
                               itemLabel="#{c.name} (id = #{c.courseId})"
                               itemValue="#{c.courseId}" />
                <f:ajax render="@form" listener="#{examManager.filterByCourse}"/>
            </h:selectOneMenu>
            <h:dataTable  value="#{examManager.allExam}" 
                         var="e" width="100%" 
                         styleClass="order-table"
    			headerClass="order-table-header"
    			rowClasses="order-table-odd-row,order-table-even-row"
                         >
                
                <h:column>
                    <f:facet name="header">
                        <h:commandLink value="ID" />
                    </f:facet>
                    #{e.examId}
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:commandLink value="Course ID" />
                    </f:facet>
                    #{e.courses.courseId}
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:commandLink value="Course" />
                    </f:facet>
                    #{e.courses.name}
                </h:column>
                <h:column>
                    <f:facet name="header">
                        <h:commandLink value="Order" />
                    </f:facet>
                    #{e.examOrderNumber}
                </h:column>
                <h:column>
                    <f:facet name="header"  >Options</f:facet>
                    <h:commandLink action="#{examManager.edit(e)}" class="icon-1 info-tooltip"  />
                    <h:commandLink action="#{examManager.remove(e)}" styleClass="icon-2 info-tooltip" />
                    <h:commandLink action="#{examManager.editResult(e)}" styleClass="icon-1 info-tooltip"  />
                </h:column>

            </h:dataTable>
            <h:commandButton value="ADD NEW"  action="create" class="buttons"/>
            <p:growl id="g1"  />
        </h:form>

    </ui:define>

</ui:composition>
